<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
	margin:0;
	padding:0;
}
.list {
	width:600px;
	margin:0 auto;
}
.list ul li {
	height:40px;
	line-height:40px;
	margin-top:10px;
	color:#fff;
	padding-left:10px;
	background:#70B9DE;
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-shadow:0 10px 10px 2px rgba(0,0,0,0.2);
}
.list ul li button {
	color:#fff;
	background:#409eff;
	outline:none;
	border:1px solid #409eff;
	margin-right:10px;
	padding:3px 8px;
	cursor:pointer;
}
.input-group {
	width:100%;
}
.input-group input {
	margin-top:40px;
	display:block;
	width:100%;
	height:40px;
	font-size:14px;
	line-height:1.42857143;
	color:#555;
	background-color:#fff;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
}
.btn-group button {
	margin-top:10px;
	display:inline-block;
	padding:12px;
	color:#fff;
	background:#008000;
	outline:none;
	border:1px solid #008000;
	cursor:pointer;
	width:100%;
	border-radius:5px;
	box-shadow:0 10px 10px 2px rgba(0,0,0,0.3)
}

            .chu{
                width: 100px;
                height: 100px;
                background-color: black;
            }
        .deng{
                width: 100px;
                height: 100px;
                background-color:red;
               
        }
        .gt{
            color: brown;
        }
        .chu{
                width: 100px;
                height: 100px;
                background-color: black;
            }
            .pt{
                width: 100px;
                height: 100px;
                background-color: indianred;
            }
            .ut{
                width: 100px;
                height: 100px;
                background-color: gold;
            }
            .it{
                width: 100px;
                height: 100px;
                background-color: orange;
            }
       
    </style>
</head>
<body>
<div id="app">
    <div class="list">
        <ul>
            <li v-for="item in arr1">
                {{item.name}}
                    <button @click="sl(w)">删除</button>
                    <button @click="arr1=[]">全部删除</button>
            </li>
        </ul>
        <div class="input-group">
            <input type="text" placeholder="输入姓名" v-model="addname">
        </div>
        <div class="btn-group">
            <button type="button"  @click="add" >增加</button>
        </div>
    </div>
        
  <!-- 1. 鼠标放上去显示 移开消失 
  2. 点击登陆 弹出登录框点击X关闭登录框  
  3. 切换支付方式效果     
  4. 选项卡 [参考效果](https://www.jq22.com/yanshi24114)
  5. 模拟下拉框 [参考效果](https://www.jq22.com/webqd2375)
  6. 动态添加删除数据  [参考效果](https://www.jq22.com/webqd7039)
  7. 一个密码输入框，带有一个按钮用于切换显示或隐藏密码文本。  参考 https://www.jq22.com/yanshi374
  8. 字数统计  https://www.jq22.com/yanshi3282 -->
  <!-- 1 -->
        <div @mouseover="re=1" @mouseout="re=2" :class="{'chu':re===1}">奥特曼</div>
        <!-- 2 -->
           <button @click="op++" v-if="op%2===0">登录</button>
           <div  v-else="" @click="op--" class="deng">x</div><br>         
           <!-- 3 -->
       <button @click="oi=1" :class="{'gt':oi===1}">微信支付</button><br>
       <button @click="oi=2" :class="{'gt':oi===2}">支付宝支付</button><br>
       <button @click="oi=3" :class="{'gt':oi===3}">银行卡支付</button><br>
        <!-- 4 -->
        <button @click="oi=1" :class="{'pt':oi===1}">内容1</button>
        <button @click="oi=2" :class="{'ut':oi===2}">内容2</button>
        <button @click="oi=3" :class="{'it':oi===3}">内容3</button>
        <!-- 5 -->
        <div  @click="show=!show">{{shows}}
            <!-- <div @click=""> -->
            <div v-for="(item,index) in arr" v-show="show" @click="shows=item,show=show">{{item}}</div>
            <!-- </div> -->
        </div>
       
        <!-- 6 -->
        <!-- 7 -->
      <input :type="a?'password':'text' ">
      <button @click="a=!a">隐藏</button>
            <!-- 8 -->
            
            <textarea type="text" maxlength="200" v-model="qw"></textarea>
            <span>{{200-qw.length}}/200</span>

</div>
    <script src="./vue.js"></script>
    <script>
        const {createApp,ref} = Vue
       const app = createApp({
            setup(){
                let arr=ref(['选项1','选项2','选项3'])
                 let re=ref(0)
                 let op=ref(0)
                 let oi=ref(0)
                 let show=ref(false)
                let shows=ref('选项卡')
                let a=ref(false)

                let addname=ref('')
                let arr1=ref([])
                let qw=ref('')
                

            function add(){
                arr1.value.push({
                    name: addname.value
                })
            }
            function sl(w){
                arr1.value.splice(w,1)
            }

                return{
             re,
             op,
             oi,
             arr,
             show,
             shows,
             add,
             arr1,
             addname,
             sl,
             a,
             qw
                }
            }
        
        }).mount('#app')
    </script>
</body>
</html>